<template>
  <div class="bgbox">
    <div class="tkbox">
      <img class="tkimg"
           alt=""
           src="@/assets/images/tkbg.png">
      <img src="@/assets/images/tktitle.png"
           class="tktitle">
      <div class="content">{{explain}}</div>
    </div>
    <div class="butbox">
      <img src="@/assets/images/tkbg1.png"
           v-if="showStatus == 1"
           @click="getAward(1)">
      <img src="@/assets/images/tkbg3.png"
           v-if="showStatus == 2"
           @click="getAward(2)">
      <img src="@/assets/images/tkbg4.png"
           @click="affirmClick()">
    </div>
  </div>

</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, getCurrentInstance, onMounted } from 'vue'

// import md5 from 'blueimp-md5'
// ~@/assets/logo.png
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Login',
  components: {},
  setup() {
    const { proxy }: any = getCurrentInstance()
    const router = useRouter()
    const route = useRoute()
    const state: any = reactive({
      showStatus: 2,
      checked: false,
      explain: '',
      explainNum: 89
    })
    function onClickLeft() {
      router.go(-1)
    }
    function getAward(num: Number) {
      console.log(num)
    }
    // 去购买
    function affirmClick() {
      console.log('去购买6')
    }
    // 关闭
    onMounted(() => {
      console.log(route.query.num, 'ddddd')
      let routeData: any = route.query.num
      // state.explainNum =
      if (~~routeData == 59) {
        state.explain =
          '您已升档至59元套餐，需要承诺使用24个月，赠送300元金币+48GB流量+5G优享速率包（6个月）。'
        return
      }
      if (~~routeData == 89) {
        state.explain =
          '您已升档至89元套餐，需要承诺使用24个月，赠送500元金币+48GB流量+5G优享速率包（6个月）。'
        return
      }
      if (~~routeData == 899) {
        state.explain =
          '需承诺使用89元或以上套餐24个月+25元新业务包12个月，赠送500元金币+200元消费红包+48GB流量+5G优享速率包（6个月）。'
        return
      }
    })

    return {
      ...toRefs(state),
      onClickLeft,
      affirmClick,
      getAward
    }
  }
})
</script>

<style lang="scss" scoped>
.bgbox {
  // position: relative;
  width: 375px;
  height: 100vh;
  padding: 0;
  margin: 0;
  // background: #ab0f08;
  background-image: url(../../../assets/images/tkimg.png);
  background-size: 100% 100%;
  background-position: center center;
  .tkbox {
    position: relative;
    padding-top: 50%;
    text-align: center;
    .tkimg {
      width: 330px;
      // position: absolute;
    }
    .tktitle {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0); /*50%为自身尺寸的一半*/
      bottom: 170px;
      width: 230px;
    }
    .content {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0); /*50%为自身尺寸的一半*/
      bottom: 60px;
      width: 270px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
    }
  }
  .butbox {
    width: 330px;
    display: flex;
    justify-content: space-between;
    margin: 50px 0 0 20px;
    img {
      width: 150px;
    }
  }
}
</style>
